<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        .operation-info {
            padding: 10px;
            border: 1px solid #ccc;
            background: #fff;
        }

        .operation-info-title {
            margin-bottom: 20px;
            color: red;
            font-size: 20px;
        }

        .operation-info-item {
            display: flex;
            flex-wrap: nowrap;
            margin-bottom: 10px;
            font-size: 16px;
            color: #222";

        }

        .operation-info-subtitle {
            width: 90px;
            flex-shrink: 0;
            display: inline-block;
        }

        .operation-info-subinfo {
            word-break: break-all;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="operation-info" data-title="{投诉受理通知}">
        <p class="operation-info-title">投诉受理通知</p>
        <p class="operation-info-item"><span class="operation-info-subtitle">投诉对象：</span><span
                class="operation-info-subinfo">【投诉代理昵称】</span></p>
        <p class="operation-info-item"><span class="operation-info-subtitle">投诉原因：</span><span
                class="operation-info-subinfo">【投诉原因】</span></p>
        <p class="operation-info-item"><span class="operation-info-subtitle">投诉内容：</span><span
                class="operation-info-subinfo">【投诉时填写的内容】</span></p>
    </div>

    <div class="operation-info" data-title="{投诉处理通知}">
        <p class="operation-info-title">投诉处理通知</p>
        <p class="operation-info-item"><span class="operation-info-subtitle">投诉时间：</span><span
                class="operation-info-subinfo">【用户提交投诉时间】</span></p>
        <p class="operation-info-item"><span class="operation-info-subtitle">投诉对象：</span><span
                class="operation-info-subinfo">【代理昵称】</span></p>
        <p class="operation-info-item"><span class="operation-info-subtitle">投诉原因：</span><span
                class="operation-info-subinfo">【投诉原因】</span></p>
        <p class="operation-info-item"><span class="operation-info-subtitle">投诉内容：</span><span
                class="operation-info-subinfo">【用户编辑的投诉内容】</span></p>
        <p class="operation-info-item"><span class="operation-info-subtitle">处理结果：</span><span
                class="operation-info-subinfo">【运营后台填写的反馈内容】</span></p>
    </div>

    <div class="operation-info" data-title="{暂离提醒}">
        <p class="operation-info-title">暂离提醒</p>
        <p style="font-size: 16px;color: #222">您当前已暂离，系统自动为您下班，请您注意及时回复用户消息。</p>
    </div>

    <div class="operation-info" data-title="{收款账号限额提醒}">
        <p class="operation-info-title">收款账号限额提醒</p>
        <p style="font-size: 16px;color: #222">您的收款账号【账号ID】已满限额，系统已自动停用该账号，将在明日自动恢复开启，请您及时调整您的收款资源。</p>
    </div>

    <div class="operation-info" data-title="{余额不足提醒}">
        <p class="operation-info-title">余额不足提醒</p>
        <p style="font-size: 16px;color: #222">你当前的可用余额不足2000，系统已自动撤下您的代理展示位，请您及时充值。</p>
    </div>

</body>

</html>